<template>
    <div>
        <div class="container">
            <mt-header title="详情">
                <router-link to="/detail" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
            </mt-header>
            <div class="body">
                <div class="title">
                    {{ data.title }}
                </div>
                <div class="time">
                    {{ data.createTime }}
                </div>
                <div class="img">
                    <img class="image" :src='img'>
                </div>
                <div v-html="data.content"></div>
                <div class="com">
                    <span class="gang">|</span> <span>评论</span> <span>(共{{data.commentNum}}条)</span>
                </div>
                <div class="comm" v-for="(item, index) in comment" :key="index">
                        <span> <img class="img-small" :src="baseUrl + item.avatar"> </span>
                        <div class="test">
                            <span class="name">{{ item.nickName }} </span>
                            <div></div>
                            <span class="detail">{{ item.content }}</span>
                            <div class="reply" v-for="(item2,index2) in item.replyList">
                                <div class="repName">
                                  {{ item2.realName}}  
                                </div>
                                <div class="repCon">
                                    {{ item2.content }}
                                </div>
                                <div class="repTime">
                                    {{ item2.createTime }}
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            id: '',
            data: {},
            author: {},
            img: '',
            baseUrl: this.getBaseUrl(),
            comment:''
        }
    },
    methods: {
        getId() {
            this.id = this.$route.query.id
            // console.log(this.id);
            this.getArticelDetail(this.id)
        },
        getArticelDetail(id) {
            this.$axios({
                url: this.$api.getArticelDetail + id,
                method: 'get'
            }).then(res => {
                this.data = res.data
                this.author = res.data.author
                this.img = this.baseUrl + res.data.imageList[0].url
                // console.log(this.data);
            })
            this.getComment(this.id)
        },
        getComment() {
            this.$axios({
                url: this.$api.getCommentList,
                methods: 'get',
            }).then(res => {
                this.commentList = res.rows
                let result = this.commentList.filter((comm) => {
                    // console.log(typeof this.id);
                    return comm.articleId === Number(this.id)
                })
                this.comment = result
                // console.log(this.comment);
            })
        }
    },
    mounted() {
        this.getId()
    }
}
</script>
<style lang="scss" scoped>
.body {
    margin: 0 auto;
    width: 95%;
    text-align: start;

    .title {
        margin-top: 2px;
        font-size: 13px;
        font-weight: 600;
    }

    .time {
        font-size: 7px;

    }

    .img {
        height: 20%;

        .image {
            width: 100%;
            height: 180px;
            border-radius: 15px;
        }
    }

    .com {
        margin-top: 10px;
        .gang{
            width: 20px;
            height: 18px;
            background-color: black;
            border-radius: 30px;
        }
    }
    .comm {
        width: 100%;
        height: 200px;

        .img-small {
            margin-top: 10px;
            margin-left: 20px;
            height: 60px;
            width: 60px;
            border-radius: 5px;
            float: left;
        }

        .name {
            margin-left: 10px;
            margin-top: 20px;
            color: blue;
        }

        .detail {
            margin-left: 10px;
            margin-top: 2px;

        }}
        .reply{
            margin-left: 23%;
            background-color: rgb(171, 164, 164);
            width: 40%;
            border-radius: 5px;
        }

}
</style>